你是否有過對 Vue 的響應式系統感到疑惑的地方？當我們在程式碼中修改一個變數時，畫面上的內容就會自動更新。這個方便快速的背後機制到底是什麼？

了解這個底層邏輯，就是我這次想動手寫這個系列文章的初衷，我相信了解這套系統如何運作，是從「會用 Vue」到「了解 Vue」的關鍵。

有人會想說，AI 都橫空出世這麼久了，我們還有需要自己去了解這些底層嗎？我相信是有這個必要性，縱使 AI 可以快速告訴你答案，但還是有可能會遇到 AI 已經將這個答案告訴你了，你還是不了解這個背後的邏輯跟核心思考。

拆解知識內容，掰開揉碎，再讓腦子吞進去，就是我想做的事。

這個系列文章，主要包含了我對響應式系統原始碼概念的解析與思考，並記錄下整個響應式系統的建構流程。

整個過程以實作為主，從建立一個 monorepo 專案開始，這個架構與官方原始碼相同，這樣可以模擬真實官方原始碼的模組化管理。

需要特別說明的是，文中出現的程式碼範例並非出全都自我個人原創，而是來自學習過程中所參考的實作，取用都有取得允許；而相關的理解與延伸，則是我在吸收後的個人整理與筆記。

主要內容範圍包含：我們常用的API ref、reactive、computed、watch，還有 effect 與響應式物件之間的關係、鏈表核心概念等等。

希望透過這個系列，不僅能加深自己對 Vue 3 的理解，也能與同樣對底層機制感到好奇的人，分享我一路下來的學習收穫。

同步更新《嘿，日安！》技術部落格